<template>
    <view class="body">
        <!-- <rf-nav-bar class="head_bar" color="color: #111110;" backgroundColor="#fff" :title="title" /> -->
        <view class="backTitle">
            <image class="bg-image" src="../../static/icon/p_040.png" mode="widthFix"></image>
            <view class="titleLeft">
                <p>设备SN号：{{comboItemData.snCode}}</p>
                <p>当前套餐：{{comboItemData.comboName}}</p>
                <p>当前剩余流量：{{comboItemData.surplusFlow}}{{comboItemData.unit}}</p>
                <p>有效期：{{comboItemData.time}}</p>
            </view>
        </view>
        <view class="combo-name">
            <text>您购买的套餐为：</text>
            <text style="color: #5079ed;">{{selectItem.comboName}}</text>
        </view>
        <view class="line"></view>
        <view class="combo-message">
            <view class="combo-item">
                <text>套餐单价：</text>
                <text>￥{{selectItem.price}}</text>
            </view>
            <view class="combo-item">
                <text>周期流量：</text>
                <text>{{selectItem.amount}}{{selectItem.unit}}</text>
            </view>
            <view class="combo-item">
                <text>可用时间：</text>
                <text>{{selectItem.validity}}天</text>
            </view>
            <!-- <view class="combo-item">
				<view class="item-text">
					<text>生效方式</text>
					<u-icon name="question-circle-fill" @click="showTip"></u-icon>
				</view>
				<view class="item-text" style="color: #5079ed;" @click="show = true">
					<text>{{takeTitle}}</text>
					<u-icon name="arrow-right" color="#5079ed"></u-icon>
				</view>
			</view> -->
        </view>
        <view class="line"></view>

        <view class="selectPay mtop10">
            <view class="payTitle ">
                请选择支付方式
            </view>
            <view class="payContent">
                <view class="pay-list">

                    <view class="row" @tap="paytype=1">
                        <view class="left">
                            <image src="../../static/icon/p_025.png" class="icon"></image>
                        </view>
                        <view class="center">
                            支付宝支付
                        </view>
                        <view class="right">
                            <radio :checked="paytype==1" color="#007AFF" />
                        </view>
                    </view>

                    <view class="row" @tap="paytype=2">
                        <view class="left">
                            <image src="../../static/icon/p_026.png" class="icon" mode="heightFix"></image>
                        </view>
                        <view class="center">
                            微信支付
                        </view>
                        <view class="right">
                            <radio :checked="paytype==2" color="#007AFF" />
                        </view>
                    </view>

                </view>
            </view>
        </view>

        <view class="footer">
            <view class="settlement">
                <view class="sum">
                    <view>合计: <span class="money">￥{{selectItem.price}}</span> </view>
                    <view class="checked">
                        <view class="agreement">
                            <u-radio-group v-model="radiovalue" style=" display: flex;">
                                <u-radio name="1" @change="radioChange">
                                    <span style="font-size: 24rpx;">我已阅读并同意</span>
                                    <p @click="goRecordXy()" style="font-size: 24rpx;color:#3182f4;">《通信充值协议》</p>
                                </u-radio>
                            </u-radio-group>
                        </view>


                    </view>
                </view>
                <view class="btn" @tap="toPay">{{isPayLoad ? '支付中': '立即购买'}}</view>
            </view>
        </view>

        <u-picker :show="show" :columns="columns" keyName="label" @cancel="closeWin"
            @confirm="confirmSelect"></u-picker>
    </view>
</template>

<script>
    import {
        bindMerchant,
        createOrder,
        orderPay
    } from '@/common/api.js'
    import rfNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue';
    // #ifdef H5
    import wechat from '@/common/wechat'
    // #endif
    export default {
        components: {
            rfNavBar
        },
        data() {
            return {
                title: '购买套餐',
                paytype: 1, //支付类型
                mpPay: true, // 是否小程序支付
                isPayLoad: false, // 是否加载支付中
                list: [],
                dataFile: '',
                active: 1,
                merchantId: '',
                active1: 1,
                networkList: [],
                merchantId: '',
                radiovalue: '2',
                selectItem: {},
                takeId: 1, //生效id
                takeTitle: '立即生效', //生效名称
                show: false,
                comboItemData: '',
                columns: [
                    [{
                        label: '立即生效',
                        // 其他属性值
                        id: 1
                        // ...
                    }, {
                        label: '顺延生效',
                        id: 2
                    }]
                ],
            }
        },
        onLoad(options) {
            console.log("options11");
            console.log(options);

            this.merchantId = options.merchantId
            this.selectItem = uni.getStorageSync('comboItem')
            this.comboItemData = uni.getStorageSync('comboDataFile').currComboVO


            const type = uni.getSystemInfoSync().uniPlatform //判断是否小程序
            if (type == 'app') {
                this.mpPay = false
            } else if (type == 'mp-weixin') {
                this.mpPay = true
            }


        },
        methods: {
            showTip() {
                uni.showToast({
                    icon: 'none',
                    title: '立即生效：购买后套餐立即生效；顺延生效：在当前使用中的套餐有效期结束后生效。',
                    duration: 5000
                })
            },
            confirmSelect(e) {
                console.log('confirm', e)
                this.takeTitle = e.value[0].label;
                this.takeId = e.value[0].id;
                this.show = false
            },
            closeWin() {
                this.show = false;
            },
            sectionChange(index) {
                this.curIndex = index;
                this.curNow = index;
            },
            goRecordXy() {
                uni.navigateTo({
                    url: '/pages/user/recordXy',
                })
            },
            radioChange(n) {
                this.radiovalue = n
                console.log(this.radiovalue);
            },

            // 订单微信支付
            orderWxPay(orderNo) {
                uni.showToast({
                    icon: 'loading',
                    title: '正在支付...'
                })

                orderPay({
                    mpPay: this.mpPay,
                    orderNo: orderNo,
                    payType: this.paytype,
                    // openId: uni.getStorageSync('openId')
                }).then(res => {
                    let orderInfos = res.data.orderInfo;
                    console.log(orderInfos);
                    // #ifdef MP
                    uni.requestPayment({ //小程序端
                        provider: "wxpay",
                        appId: orderInfos.appId, // 微信开放平台 - 应用 - AppId，注意和微信小程序、公众号 AppId 可能不一致
                        nonceStr: orderInfos.nonceStr, // 随机字符串
                        package: orderInfos.package, // 固定值
                        timeStamp: orderInfos.timeStamp, // 时间戳（单位：秒）
                        signType: orderInfos.signType,
                        paySign: orderInfos.sign, // 签名，这里用的 MD5/RSA 签名
                        success(res) {
                            this.goResult();
                            console.log("成功唤醒支付");
                            console.log(res);
                        },
                        fail(e) {
                            console.log(e);
                        }
                    })
                    // #endif 

                    // #ifdef APP-PLUS
                    if (this.paytype === 1) { //支付宝
                        console.log("支付宝");
                        uni.requestPayment({ //app端
                            provider: 'alipay',
                            orderInfo: orderInfos,
                            success: (res) => {
                                console.log('res = ', res)
                                this.goResult();
                            },
                            fail: (error) => {
                                console.log('error = ', error)
                            },
                            complete: (com) => {
                                console.log('com = ', com)
                            }
                        })


                    } else { //微信支付
                        console.log("微信支付")

                        uni.requestPayment({ //app端
                            provider: 'wxpay',
                            orderInfo: orderInfos,
                            success: (res) => {
                                console.log('res = ', res)
                                this.goResult();
                            },
                            fail: (error) => {
                                console.log('error = ', error)
                            },
                            complete: (com) => {
                                console.log('com = ', com)
                            }
                        })


                        // uni.requestPayment({ //小程序端
                        //     provider: "wxpay",
                        //     appid: orderInfos.appid, // 微信开放平台 - 应用 - AppId，注意和微信小程序、公众号 AppId 可能不一致
                        //     noncestr: orderInfos.noncestr, // 随机字符串
                        //     package: orderInfos.package, // 固定值
                        //     timestamp: orderInfos.timestamp, // 时间戳（单位：秒）
                        //     sign: orderInfos.sign,
                        //     prepayid: orderInfos.prepayid,
                        //     partnerid: orderInfos.partnerid,
                        //     success(res) {
                        //         this.goResult();
                        //         console.log("成功唤醒支付");
                        //         console.log(res);
                        //     },
                        //     fail(e) {
                        //         console.log(e);
                        //     }
                        // })
                    }

                    // #endif 

                })
            },

            // 跳转到支付结果页面
            goResult() {
                //暂时返回
                // uni.navigateBack()
                this.merchantId = uni.getStorageSync('USER_KEY').merchantId
                uni.navigateTo({
                    url: `/pages/combo/combo?merchantId=${this.merchantId}`
                })
            },

            getOrderSn() {
                let data = {
                    comboId: this.selectItem.comboId,
                    merchantId: this.merchantId,
                    openId: uni.getStorageSync('openId')
                }
                uni.showToast({
                    icon: 'loading',
                    title: '正在创建订单...'
                })
                let that = this
                createOrder(data).then(res => {
                    if (res.data.status === 400 || res.data.status === 500) {
                        uni.showToast({
                            icon: 'none',
                            title: '创建订单失败,请重新下单'
                        })
                    } else {
                        that.orderWxPay(res.data.orderNo)
                    }

                })
            },

            toPay() {
                if (this.radiovalue !== '1') {
                    this.$u.toast('请先阅读并同意协议和条款')
                    return;
                }
                this.getOrderSn()


                // // #ifdef H5
                // if (!wechat.isWechat()) {
                //     this.$u.toast('请在微信中打开链接，进行支付')
                // } else {
                //     this.getOrderSn()
                // }
                // // #endif
                // // #ifdef MP
                // this.getOrderSn()
                // // #endif

            },


        }
    }
</script>

<style lang="scss">
    .body {
        font-size: 28rpx;

        .active {
            border-bottom: 2px solid #517af1 !important;
            color: #517af1 !important;
        }

        .active1 {
            border: 1px solid #517af1 !important;
            background-color: #edf1fd;

        }

        .backTitle {
            background-color: #5079ed;
            height: 280rpx;
            width: 100%;
            // background-image: url("../../static/icon/p_040.png");
            // background-repeat: no-repeat;
            // background-size: 30%;
            // background-position: 250px 10rpx;
            position: relative;

            .bg-image {
                width: 30%;
                position: absolute;
                top: 50rpx;
                right: 20rpx;

            }

            .titleLeft {
                position: absolute;
                color: #fff;
                margin-left: 30rpx;
                font-weight: 600;
                padding-top: 110rpx;
            }
        }

        .uTabs {
            width: 100%;

            .justTab {
                width: 50%;
                height: 84rpx;
                display: flex;
                align-items: center;
                justify-content: center;
                border-bottom: 1px solid #f4f3f3;


                p {
                    text-align: center;
                    width: 35%;
                    line-height: 80rpx;
                    height: 80rpx;
                    font-weight: 500;
                    color: #999;
                    border-bottom: 2px solid #fff;
                }
            }
        }

        .comboTip {
            width: 98%;
            height: 80rpx;
            line-height: 80rpx;
            text-align: right;
            color: #5079ed;
            margin-right: 2%;
        }

        .line {
            width: 100%;
            height: 24rpx;
            background-color: #edf1fd;
        }

        .combo-name {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 24rpx;
        }

        .combo-message {
            width: 100%;
            box-sizing: border-box;
            padding: 24rpx;

            .combo-item {
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-bottom: 20rpx;

                .item-text {
                    display: flex;
                    align-items: center;
                }
            }
        }


        .selectPay {
            width: 95%;
            margin-left: 3%;


            .payTitle {
                font-size: 28rpx;
                color: #000;
                font-weight: 600;

            }

            .payContent {
                .pay-list {
                    width: 100%;


                    .row {
                        width: 100%;
                        height: 120upx;
                        display: flex;
                        align-items: center;

                        .left {
                            width: 100rpx;
                            flex-shrink: 0;
                            display: flex;
                            align-items: center;

                            .icon {
                                width: 60rpx;
                                height: 60rpx;
                            }
                        }

                        .center {
                            width: 100%;
                            font-size: 30upx;
                            justify-content: left;

                        }

                        .right {
                            width: 100upx;
                            flex-shrink: 0;
                            display: flex;
                            justify-content: flex-end;
                        }
                    }
                }
            }
        }

        .footer {
            width: 98%;
            padding: 0 4%;
            background-color: #fbfbfb;
            height: 120rpx;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            font-size: 28upx;
            position: fixed;
            bottom: 0upx;
            z-index: 5;
            border-top: solid 1upx #eee;

            .settlement {
                width: 100%;
                display: flex;
                justify-content: space-around;
                align-items: center;

                .sum {
                    font-size: 32upx;
                    margin-right: 10upx;
                    display: flex;
                    flex-direction: column;

                    .money {
                        font-weight: 600;
                        color: #5079ed;
                        font-weight: bold;
                        font-size: 36upx;
                        margin-left: 20upx;
                    }

                    .checked {
                        display: flex;

                        .agreement {
                            display: flex;
                        }
                    }

                }

                .btn {
                    padding: 0 30upx;
                    height: 80upx;
                    background-color: #5079ed;
                    color: #fff;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    font-size: 30upx;
                    margin-left: 20upx;
                    border-radius: 10upx;
                }
            }
        }

    }
</style>